<!-- Vue指令 v-if
v-if
1.作用：控制元素显示隐藏（条件渲染）
2.语法:v-if="裴达式表达式值true显示，false隐藏
3.原理：基于条件判断，是否创建或移除元素节点
4.场景：要么显示，要么隐藏，不频繁切换的场景
 -->
<style>
    .box {
        width: 120;
        height: 120;
        border: 5px solid black;
        text-align: center;
        border-radius: 5px;
        box-shadow: 2px 2px 2px #ccc;
    }
</style>
<div id="app">
    <div v-if="flag" class="box"> v-if控制的盒子</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            flag: false
        }
    })
</script>